<template>
  <div id="index">
    <van-search
      class="search"
      v-model="value"
      placeholder="请输入搜索关键词"
      shape="round"
      @click="goSearch()"
    />
    <van-swipe :autoplay="3000" class="imglist">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image.url" width="100%" height="140px" />
      </van-swipe-item>
    </van-swipe>
    <navigation></navigation>
    <recommend></recommend>
    <melody></melody>
  </div>
</template>

<script>
import Navigation from "../components/content/Navigation.vue";
import Recommend from '../components/content/Recommend.vue';
import Melody from '../components/content/Melody.vue';
export default {
  components: { Navigation, Recommend, Melody },
  data() {
    return {
      value: "",
      images: [
        {
          url:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3772295397,2287445990&fm=26&gp=0.jpg",
        },
        {
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605266235288&di=5aac0ee6332b8d0adf14787c15c06467&imgtype=0&src=http%3A%2F%2Fhiphotos.baidu.com%2Fbdnuy%2Fpic%2Fitem%2F061fd7aba40f4bfb3a978aea034f78f0f63618ee.jpg",
        },
        {
          url:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1465656397,1049090904&fm=26&gp=0.jpg",
        },
        {
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605266279809&di=cd781315a1e95dd6218941f0336e967d&imgtype=0&src=http%3A%2F%2Fc3.haibao.cn%2Fimg%2F1080_728_100_1%2F1552369046.936%2F88cace5a1398ee4b85283aba79147fc1.jpg",
        },
        {
          url:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3530470019,2781349645&fm=26&gp=0.jpg",
        },
        {
          url:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1479605400,3432527056&fm=26&gp=0.jpg",
        },
      ],
    };
  },
  mounted() {
    console.log("我是首页");
    this.$store.commit("setCurrentView", 0);
  },
  methods: {
    goSearch() {
      this.$router.push({path: "/searchView" })
    }
  }
};
</script>

<style scoped>
#index .search {
  position: fixed;
  height: 50px;
  background: #acf6ef;
  z-index: 3;
  width: 100%;
}
#index .imglist {
  width: 90%;
  top: 10px;
  margin: 0 auto;
  border-radius: 10px;
  padding-top: 50px;
}
#index .imglist img{
  border-radius: 10px;
}
</style>